<template>
  <div
    :style="getWrapStyle"
    :class="[prefixCls, getLayoutContentMode]"
    v-loading="getOpenPageLoading && getPageLoading"
  >
    <PageLayout />
  </div>
</template>
<script lang="ts">
  import PageLayout from '/@/layouts/page/index.vue';

  import { useContentViewHeight } from './useContentViewHeight';
  import { CSSProperties } from 'vue';

  export default defineComponent({
    name: 'LayoutContent',
    components: { PageLayout },
    setup() {
      const { prefixCls } = useDesign('layout-content');
      const { getOpenPageLoading } = useTransitionSetting();
      const { getLayoutContentMode, getPageLoading } = useRootSetting();
      const { getHeaderHeight } = useHeaderSetting();
      const { getShowMultipleTab } = useMultipleTabSetting();

      const getWrapStyle = computed((): CSSProperties => {
        const style: CSSProperties = {
          //标签页高度52，见 header/MultipleHeader.vue
          height: `calc(100vh - ${getHeaderHeight.value + (getShowMultipleTab.value ? 52 : 0)}px)`,
        };

        return style;
      });

      useContentViewHeight();
      return {
        prefixCls,
        getOpenPageLoading,
        getLayoutContentMode,
        getPageLoading,
        getWrapStyle,
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-layout-content';

  .@{prefix-cls} {
    @apply px-4 pb-4;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    //需同步修改 mutipletab+header = 100px
    //见 '/@/layouts/default/header/MultipleHeader.vue'
    // height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;

    // begin: 下面这块代码 在我的项目打包后在比较宽的屏幕(2K 31 寸)有显示 bug 有偶发性 清缓存首次进入会出现 , 刷新就没了, 这里为什么要指定宽度 ?
    &.fixed {
      width: 1200px;
      margin: 0 auto;
    }
    // end

    &-loading {
      position: absolute;
      top: 200px;
      z-index: @page-loading-z-index;
    }
  }
</style>
